<!-- 异常详情 -->
<template>
	<view>
		<div class="container">
		        <div class="line">
		            <span class="text">运单号：</span>
		            <span class="text">{{items.waybillNumber}}</span>
		        </div>
		        <div class="line">
		            <span class="text">到站：</span>
		            <span class="text" v-if="items.destinationStation!=null">{{items.destinationStation}}</span>
		        </div>
		        <div class="line">
		            <span class="text">总费用：</span>
		            <span class="text">{{items.sanbaoCost}}</span>
		        </div>
				<div class="line">
				    <span class="text">货件信息：</span>
				    <span class="text" v-if="items.description!=null">{{items.description}}</span>
					<span class="text" v-if="item.number!=null">{{item.number}}件</span>
					<span class="text">{{items.weight}}kg{{items.volume}}m</span>
				</div>
				<div class="line">
				    <span class="text">包装内容：</span>
				    <span class="text"  v-if="items.installContent!=null">{{items.installContent}}</span>
				</div>
				<div class="line">
				    <span class="text">开单备注：</span>
				    <span class="text" v-if="items.articleNumber!=null">{{items.articleNumber}}</span>
				</div>
				<div class="line">
				    <span class="text">配送方式：</span>
				    <span class="text"  v-if="items.receiving!=null">{{items.receiving}}</span>
				</div>
				<div class="line">
				    <span class="text">预约日期：</span>
				    <span class="text" v-if="items.predictTime!=null">{{items.predictTime}}</span>
				</div>
				<div class="line">
				    <span class="text">预约内容：</span>
				    <span class="text"  v-if="items.predictContent!=null">{{items.predictContent}}</span>
				</div>
				<div class="line">
				    <span class="text">派单人：</span>
				    <span class="text" v-if="items.predictContent!=null">{{items.articleNumber}}</span>
				</div>
				<div class="line">
				    <span class="text">收货人：</span>
				    <span class="text" v-if="items.putUserName!=null">{{items.putUserName}}</span>
				</div>
				<div class="line">
				    <span class="text">送货地址：</span>
				    <span class="text" v-if="items.masterPorterAddress!=null">{{items.masterPorterAddress}}</span>
				</div>
				<div class="line">
				    <span class="text">提货电话：</span>
				    <span class="text"  v-if="items.masterPorterContact!=null">{{items.masterPorterContact}}</span>
				</div>
				<div class="line">
				    <span class="text">提货地址：</span>
				    <span class="text"  v-if="items.masterPorterAddress!=null">{{items.masterPorterAddress}}</span>
				</div>
				<div class="line">
				    <span class="text">派单备注：</span>
				    <span class="text"  v-if="items.articleNumber!=null">{{items.articleNumber}}</span>
				</div>
				<div class="line">
				    <span class="text">厂家信息：</span>
				    <span class="text"  v-if="items.sendUserName!=null">{{items.sendUserName}}</span>
				</div>
				<div class="line">
				    <span class="text">派单日期：</span>
				    <span class="text"  v-if="items.sendTime!=null">{{items.sendTime}}</span>
				</div>
				<div class="pictureUrl">
				    <span>异常图片：</span>
			<!-- 	    <span class="text"  v-if="items.file!=null">{{items.file}}</span> -->
					<div class="picture"><img v-for="(url, index) in imageUrls" :key="index" :src="url" alt="Image from database" style="width: 100px;height: 100px;margin-left: 5px;"/></div>
				</div>
		    </div>
	</view>
</template>

<script>
	import {details} from '@/api/abnormal.js';
	export default {
		data() {
			return {
				phone:'',
				businessId:'',
				items:{},
				imageUrls:[]
			}
		},
		onLoad(options) {
					this.businessId=options.id
			},
		mounted(){
			details({businessId: this.businessId}).then(res =>{
				this.items=res.data.data
				// this.imageUrls=res.data.data.fileList
				this.imageUrls=res.data.data.abnormalFile
			}).catch((error) => {
			});
			// this.fetchImagesFromDatabase();
		},
		methods: {
			fetchImagesFromDatabase() {
			  try {
			    // 假设data.images包含了图片的路径或URL数组
			    //this.imageUrls = this.items.fileList; // 将图片URL数组保存到组件的state中
			  } catch (error) {
			    console.error('Failed to fetch images from database:', error);
			  }
			}
		}
	}
</script>

<style>
.container {
            display: flex;
            flex-direction: column;
            gap: 10px; /* 行间距，可以根据需要调整 */
			margin-top: 5px;
			margin-left: 15px;
			margin-right: 15px;
        }
        .line {
            display: flex;
            justify-content: space-between;
            padding: 0 5px; /* 左右边距5px */
            border-bottom: 1px solid #dadada; /* 下划线 */
			line-height: 35px;
        }
		.pictureUrl{
			display:inline-block;
			line-height: 20px;
		}
		.picture{
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			line-height: 20px;
		}
        .text {
            margin: 0; /* 移除默认的margin */
        }
</style>
